<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive, ref } from 'vue';
const props = defineProps({
   data: {
    type: Array,
    default:  () => []
   }
})




var colorList = [
  ['#b24743', '#b24743'],
  ['#c76841', '#c76841'],
  ['#dac322', '#dac322'],
  ['#3a7bcb', '#3a7bcb'],
  ['#3bceaa', '#3bceaa'],
];
function colorFn(params) {
  //params 传递过来的柱子对象
  // dataIndex 是当前柱子的索引
  var colorItem = colorList[params.dataIndex];
  return new echarts.graphic.LinearGradient(
    1,
    0,
    0,
    0,
    [
      {
        offset: 0,
        color: colorItem[0]
      },
      {
        offset: 1,
        color: colorItem[1]
      },
      {
        offset: 1,
        color: colorItem[1]
      },
      {
        offset: 1,
        color: colorItem[1]
      },
      {
        offset: 1,
        color: colorItem[1]
      }
    ],
    false
  );
}

let sumNumber = [{ value: 100 }, { value: 100 }, { value: 100 }, { value: 100 }, { value: 100 }];

let NumberList = sumNumber.map((v, index) => {
  return {
    value: v.value,
    itemStyle: {
      normal: {
        barBorderRadius: 15,
        color: 'none', //填充色
        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: colorList[index][1]
          },
          {
            offset: 1,
            color: colorList[index][0]
          }
        ])
      },

      borderWidth: 1
    }
  };
});
const option = {
  tooltip: {
    // trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '10%',
    right: '5%',
    bottom: '6%',
    top: '10%'
    // containLabel: true/
  },
  xAxis: {
    show: false //不显示x轴相关信息
  },
  yAxis: [
    {
      type: 'category',
      data: ["正常设备", "维修中设备", "待检修设备", "待检修设备", "待检修设备"],
      axisLabel: {
        formatter(value, index) {
          index += 1;
          return `{rank${index}|No.${index}} {text1|${value}}`;

        },
        rich: {
          rank1: {
            width: 30,
            height: 20,
            color: '#e3ebf1',
            align: 'left',
            backgroundColor: '#FD4844',
            fontSize: 12,
          },
          rank2: {
            width: 30,
            height: 20,
            color: '#e3ebf1',
            align: 'left',
            backgroundColor: '#c76841',
            fontSize: 12,
          },
          rank3: {
            width: 30,
            height: 20,
            color: '#e3ebf1',
            align: 'left',
            backgroundColor: '#c76841',
            fontSize: 12,
          },
          rank4: {
            width: 30,
            height: 20,
            color: '#e3ebf1',
            align: 'left',
            backgroundColor: '#3a7bcb',
            fontSize: 12,
          },
          rank5: {
            width: 30,
            height: 20,
            color: '#e3ebf1',
            align: 'left',
            backgroundColor: '#3bceaa',
            fontSize: 12,
          },
        },
        show: true,
        inside: true,
        textStyle: {
          color: '#fff',
          verticalAlign: 'bottom',
          fontSize: 10,
          // align: 'left',
          padding: [0, 0, 10, 0]
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      inverse: true
    },
    {
      type: 'category',
      data: [100, 100, 100, 100, 100],//显示的数据
      axisTick: { show: false }, //不显示刻度线
      axisLabel: {
        show: true,
        inside: true,
        textStyle: {
          color: '#fff',
          fontSize: 12,
          verticalAlign: 'bottom',
          align: 'right',
          padding: [7, 0, 10, 0]
        }
      },
      axisLine: {
        show: false
      },
      inverse: true
    }
  ],
  series: [
    {
      name: ["111111", "222222", "333333"],
      yAxisIndex: 0,
      tooltip: {
        show: true //显示提示框
      },
      type: 'bar',
      data: [90, 40, 50, 70, 80],
      // 修改第一条柱子的圆角
      itemStyle: {
        normal: {
          barBorderRadius: 20,
          color: colorFn
        }
        // color 可以修改柱子的颜色
        // color:"orange"
      },
      // 柱子之间的间距
      barCategoryGap: 10,
      // 柱子之间的宽度
      barWidth: 5,
      // 显示柱子内的文字
      // label: {
      //   show: true,
      //   color:'#fff',
      //   position: 'inside',
      //   formatter: '{c}%'
      //   // {c} 会自动解析为data中的数据
      // }
    },
    {
      name: '框',
      tooltip: {
        show: false //显示提示框
      },
      yAxisIndex: 1,
      type: 'bar',
      barGap: '10%',
      // 柱子之间的间距
      barCategoryGap: 10,
      // 柱子之间的宽度
      barWidth: 10,
      data: NumberList
    }
  ]
};

const links = ref(null);
const chartInit = () => {
  const myChart = echarts.init(links.value);
  myChart.setOption(option);
}
onMounted(() => {
  chartInit();
})
</script>
<template>
  <div class="links" ref="links">123</div>
</template>
<style scoped>
.links {
  width: 100%;
  height: 100%;
}
</style>